package myJs.cps

import cats.effect.SyncIO
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import myJs.Implicits._
import myJs.tool.Tool
import myJs.tool.Tool._
import japgolly.scalajs.react.React.Fragment
import myJs.Utils._
import myJs.myPkg.Hooks._

import scala.scalajs.js

/** Created by yz on 3/11/2020
  */
object MiniColorInlineCp {

  case class Props(
      value: js.UndefOr[String] = js.undefined,
      onChange: String => SyncIO[Unit] = (v:String)=>SyncIO{},
      show: Boolean = true,
      label: VdomNode,
      name: String,
      questionInfo: String = "",
      labelWidth: Int = 2,
      inputWidth: Int = 4
  ) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val fieldNames = List(props.name)
    useEffect(
      SyncIO {
        Tool.popover
        ()
      },
      List()
    )

    val displayStr = if (props.show) "block" else "none"
    div(
      display := displayStr,
      className := "form-group",
      label(
        className := s"control-label col-sm-${props.labelWidth}",
        props.label,
        if (props.questionInfo.nonBlank) {
          span(
            className := "",
            a(
              `type` := "button",
              className := "selfQuestion",
              title := messages("note"),
              dataContainer := "body",
              dataToggle := "popover",
              vDataHtml := "true",
              dataPlacement := "left",
              dataContent := props.questionInfo,
              i(className := "fa fa-question-circle-o")
            )
          )
        } else EmptyVdom,
        ":"
      ),
      div(
        className := s"col-sm-${props.inputWidth}",
        PureMiniColorCp.Props(name = props.name, value = props.value, onChange = props.onChange).render
      )
    )

  }

}
